<template>
  <div class="view-wrapper">
    <div class="bridgeCardDetail">
      <div class="bt">基础信息</div>
      <div class="information">
          <div class="card" >
            <img class="cardImg" :src="cardData.individuationCardCover" alt="">
            <div class="name">{{cardData.name}}</div>
            <div class="botBox">
              <div class="time">卡有效期：{{cardData.validityType == 2 ? cardData.validityEndTime : cardData.validityTypeDict}}</div>
              <div class="money">￥{{cardData.worth}}</div>
            </div>
            <el-button type="primary" class="editBtn" @click="handleImg">修改</el-button>
          </div>
          <div class="basis">
            <div class="title">基础权益</div>
            <div class="list">
              <div class="lable">发卡单位：</div>
              <div class="content">{{cardData.associationName}}</div>
            </div>
            <div class="list">
              <div class="lable">适用门店：<el-button type="primary" size="mini" @click="lookMerchants">增加门店</el-button></div>
              <div class="content" >
                <span v-for="(item,index) in cardData.shopNameList" :key="index" style="margin-right: 6px;">{{index+1}}、{{item}}</span>
              </div>
            </div>
            <div class="list">
              <div class="lable">温馨提示：</div>
              <div class="content">{{cardData.assetIntroduce}}</div>
            </div>
          </div>
          <div class="exclusive">
            <div class="title">专属权益</div>
            <div class="list" v-for="(item,index) in cardData.exclusiveList" :key="index">
              <div class="lable">{{item.shopName}}</div>
              <div class="content">{{item.activityContent}}</div>
              <div class="content" v-if="item.discount">到店消费享门价{{item.discount}}折</div>
            </div>
          </div>
      </div>
      <div class="bt_box">
         <div class="bt">发卡情况</div>
         <el-button type="primary" size="mini" style="margin: 12px 0 0 14px" @click="AddCard">增发</el-button>
      </div>
      <div class="issuing">
          <div class="list">
            <div class="lable">计划发卡数量：</div>
            <div class="content">{{cardData.issueTotal}}张</div>
          </div>
          <div class="list">
            <div class="lable">已导入会员：</div>
            <div class="content">{{cardData.wealUserNum}}个</div>
          </div>
      </div>
      <div class="bt">领卡URL</div>
        <div class="ledCard">
          <div class="list">
             <img :src="cardData.receiveCardUrl" alt="">
          </div>
      </div>
    </div>
    <img-detail-dialog
      ref="childRef"
      v-if="imgDetailDialog"
      :cardData="cardData"
      :visible.sync="imgDetailDialog"
      @success="_handleSuccess"
    />
    <card-detail-dialog
      v-if="cardDetailDialog"
      :cardData="cardData"
      :visible.sync="cardDetailDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
// components

import { bridgeCardDetail} from "@/api/bridgeCard";
import imgDetailDialog from './components/imgDetailDialog' 
import cardDetailDialog from './components/cardDetailDialog'

export default {
  //   name: "",
  components: {
    imgDetailDialog,
    cardDetailDialog,
  },
  data() {
    return {
      imgDetailDialog: false,
      cardDetailDialog: false,
      assetId: '',
      cardData:{},
    };
  },
  created() {
    this.assetId = this.$route.query.assetId
    this.getDetail()
  },
  computed: {},
  methods: {
    //修改信息
    handleImg(){
      this.imgDetailDialog = true
    },
    getDetail() {
      //获取有效期字典
      const params = {
        assetId: this.assetId,
      };
      bridgeCardDetail(params).then((res) => {
        if(res.code == 200){
          console.log(res)
          this.cardData = res.result
        }
      });
    },

    _handleSuccess(data) {
      this.getDetail()
    },
    //增发卡
    AddCard(){
      this.cardDetailDialog = true
    },
    //增加门店
    lookMerchants(id){
      this.$router.push({
        path: "/merchants/look-merchants",
        query: {
          assetId: this.assetId
        }
      })
    },
  },
};
</script>
<style lang="scss">
.bridgeCardDetail{
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.bt{
  width: 120px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #1890ff;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 30px;
}
.bt_box{
  display: flex;
  align-items: flex-start;
}
.information{
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    .card{
      width: 350px;
      height: 180px;
      border-radius: 8px;
      border: 1px solid #999;
      margin-left: 20px;
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between; 
      position: relative;
      .cardImg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
     .name{
        font-size: 20px;
        font-weight: 600;
        color: #000;
        position: absolute;
        padding-left:20px;
      }
      .botBox{
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 110px;
        width: 100%;
        padding: 0 20px;
        color: #000;
        .time{
          font-size: 16px;
          font-weight: 500;
        }
        .money{
          font-size: 20px;
          
          font-weight: 600;
        }
      }
      .editBtn{
        position: absolute;
        bottom: -50px;
        left: 145px;
      }
    }
    .basis{
      display: flex;
      flex: 1;
      margin: 0 60px;
      flex-direction: column;
      .title{
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
      }
      .list{
        margin-bottom: 20px;
        font-size: 14px;
        .content{
          margin-top: 8px;
        }
      }
    }
    .exclusive{
      display: flex;
      flex: 1;
      flex-direction: column;
      .title{
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
      }
      .list{
        margin-bottom: 8px;
        font-size: 14px;
        .content{
          margin-top: 8px;
          span{
            
          }
        }
      }
    }
}
.issuing{
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
  padding-bottom: 60px;
  .list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 60px;
    .lable{
      margin-right: 20px;
    }
  }
}
.ledCard{
   display: flex;
  justify-content: flex-start;
  padding-left: 20px;
  padding-bottom: 60px;
  .list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .lable{
      margin-right: 20px;
    }
  }
}
</style>
